<!DOCTYPE html>
<template>
  <div>
    <input class="input" :class="{ error: !isOk }" :type="type" :placeholder="placeholder" @input="dataChange" @blur="judgeMessage">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isOk: true
      }
    },
    props: ['type', 'placeholder', "rule", "err_message"],
    methods: {
      dataChange($event) {
        if (!$event.target.value) {
          this.isOk = true
        } else {
          let regexp = new RegExp(this.rule)
          this.isOk = regexp.test($event.target.value)
        }
        this.$emit('sendData', $event.target.value)
      },
      judgeMessage(){
        if(!this.isOk){
          this.$toast.fail(this.err_message)
        }
      }
    }
  }
</script>

<style scoped>
  .input {
    display: flex;
    width: 100%;
    padding: 6vw 3vw;
    outline: none;
    border: none;
    border-bottom: 1px solid #666;
    background: #f2f2f2;
    font-size: 5vw;
  }

  .error {
    border-color: red;
  }
</style>
